
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>认识生词</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 移动端专用样式 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                max-width: 100%;
            }
            
            .header {
                padding: 15px;
                margin-bottom: 20px;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            .main-content {
                gap: 20px;
            }
            
            .learning-section {
                padding: 20px;
            }
            
            .chinese-word {
                /* 调整为更适合手机的大小 */
                /* font-size: 12rem;  */
                font-size: 12rem;
                margin-bottom: 10px;
            }
            
            .pinyin {
                font-size: 2.5rem; /* 调整为更适合手机的大小 */
            }
            
            .pinyin-container {
                gap: 15px;
                margin-bottom: 20px;
            }
            
            .audio-btn {
                font-size: 1.5rem;
                width: 20px;
                padding: 8px;
            }
            
            .progress {
                font-size: 1rem;
                margin-bottom: 20px;
            }
            
            .controls {
                display: flex;
                flex-direction: row;
                gap: 15px;
                justify-content: center;
                flex-wrap: nowrap; /* 防止换行 */
            }
            
            /* 特别为控制按钮设置样式 */
            .prev-btn, .next-btn {
                flex: 1;
                min-width: 120px; 
                max-width: 150px;
                width: 30px!important;
            }
            
            .shuffle-btn {
                width: 100% !important;
                max-width: 200px;
                /* margin-top: 15px; */
            }
            
            .btn {
                width: 100%;
                max-width: none;
                padding: 15px;
                font-size: 1.1rem;
                min-height: 50px;
            }
            
            .word-display {
                margin-bottom: 20px;
            }
            
            .color-selector {
                gap: 8px;
                margin-bottom: 15px;
            }
            
            .color-card {
                width: 20px;
                height: 20px;
            }
            
            .empty-state {
                padding: 30px 15px;
            }
            
            .empty-icon {
                font-size: 3rem;
                margin-bottom: 15px;
            }
            
            .empty-state p {
                font-size: 1.1rem;
                margin-bottom: 20px;
            }
            
            .add-section {
                padding: 20px;
            }
            
            .form-group {
                flex-direction: column;
                gap: 10px;
            }
            
            #chineseInput {
                padding: 12px;
                font-size: 1rem;
                min-height: 50px;
            }
            
            .add-btn {
                padding: 12px;
                min-height: 50px;
            }
            
            .default-vocab-section {
                flex-direction: column;
                gap: 10px;
                margin-top: 15px;
            }
            
            .default-vocab-btn, .clear-all-btn {
                width: 100%;
                padding: 12px;
            }
            
            .word-list-section {
                padding: 20px;
            }
            
            .word-list-section h2 {
                font-size: 1.3rem;
                margin-bottom: 15px;
            }
            
            .word-card {
                padding: 12px 15px;
                margin-bottom: 10px;
            }
            
            .word-card-chinese {
                font-size: 1.5rem;
            }
            
            .word-card-pinyin {
                font-size: 1rem;
            }
            
            .word-card-actions {
                flex-direction: column;
                gap: 5px;
            }
            
            .delete-btn, .edit-pinyin-btn {
                padding: 6px 12px;
                min-height: 35px;
                font-size: 0.9rem;
            }
            
            .modal-content {
                margin: 20% auto;
                width: 95%;
                padding: 15px;
            }
            
            .chinese-preview {
                font-size: 2rem;
            }
            
            #pinyinInput {
                padding: 10px 12px;
                font-size: 1rem;
            }
            
            .modal-buttons {
                flex-direction: column;
                gap: 10px;
            }
            
            .cancel-btn, .save-btn {
                width: 100%;
                padding: 12px;
                min-height: 45px;
            }
        }
        
        /* 超小屏幕优化 - 即使在小屏幕上也保持按钮在一行 */
        @media (max-width: 480px) {
            .chinese-word {
                font-size: 10rem;
            }
            
            .pinyin {
                font-size: 1.8rem;
            }
            
            .header h1 {
                font-size: 1.3rem;
            }
            
            .btn {
                font-size: 1rem;
                padding: 12px;
                min-height: 45px;
            }
            
            /* 在超小屏幕上仍然保持按钮在一行 */
            .controls {
                flex-direction: row;
                gap: 10px;
            }
            
            .prev-btn, .next-btn {
                min-width: 100px;
                max-width: none;
                flex: 1;
            }
            
            .shuffle-btn {
                margin-top: 15px;
                min-height: 45px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>幼儿生词学习</h1>
        </header>

        <main class="main-content">
            <!-- 学习展示区域 -->
            <section class="learning-section" id="learningSection">
                <div class="word-display" id="wordDisplay">
                    <div class="chinese-word" id="chineseWord"></div>
                    <div class="color-selector" id="colorSelector">
                        <div class="color-card active" style="background-color: var(--secondary-color-1);" data-color="var(--secondary-color-1)"></div>
                        <div class="color-card" style="background-color: #FF6B6B;" data-color="#FF6B6B"></div>
                        <div class="color-card" style="background-color: #4ECDC4;" data-color="#4ECDC4"></div>
                        <div class="color-card" style="background-color: #FFD93D;" data-color="#FFD93D"></div>
                        <div class="color-card" style="background-color: #6A0572;" data-color="#6A0572"></div>
                    </div>
                    <div class="pinyin-container">
                        <div class="pinyin" id="pinyin"></div>
                        <div style="width: 30px">
                            <button 
                                class="btn audio-btn" id="audioBtn" 
                                title="播放发音" style="min-width: 50px !important;">🔊</button>
                        </div>
                        
                    </div>
                </div>
                
                <div class="progress" id="progress"></div>
                
                <div class="controls">
                    <button class="btn prev-btn" id="prevBtn">上一个</button>
                    <button class="btn next-btn" id="nextBtn">下一个</button>
                </div>
                <div>
                    <button class="btn shuffle-btn" style="width: 280px;" id="shuffleBtn">重新排序</button>
                </div>
            </section>

            <!-- 空状态提示 -->
            <section class="empty-state" id="emptyState">
                <div class="empty-icon">📚</div>
                <p>还没有添加生词</p>
                <button class="btn add-first-btn" id="addFirstBtn">点击添加生词开始学习</button>
            </section>

            <!-- 添加生词表单 -->
            <section class="add-section">
                <form id="addWordForm">
                    <div class="form-group">
                        <input type="text" id="chineseInput" placeholder="请输入汉字(1-2个字符)，多个词汇用空格或逗号分隔" maxlength="100" required>
                        <button type="submit" class="btn add-btn">添加生词</button>
                    </div>
                </form>
                <div class="default-vocab-section">
                    <button class="btn default-vocab-btn" id="v20251103">加载生词库(251103)</button>
                    <button class="btn default-vocab-btn" id="v202510hz">加载10月汇总</button>
                    <button class="btn default-vocab-btn" id="loadDefaultVocab">加载默认生词库</button>
                    <button class="btn default-vocab-btn" id="v20251020">加载生词库(251020)</button>
                    <button class="btn default-vocab-btn" id="v20251021">加载生词库(251021)</button>
                    <button class="btn clear-all-btn" id="clearAllVocab">清空所有生词</button>
                </div>
            </section>

            <!-- 生词列表 -->
            <section class="word-list-section">
                <h2>生词列表</h2>
                <div class="word-list" id="wordList"></div>
            </section>
        </main>
    </div>

    <!-- 拼音编辑模态框 -->
    <div class="modal" id="pinyinModal">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <h2>修改拼音</h2>
            <div class="modal-body">
                <div class="word-preview">
                    <div class="chinese-preview" id="chinesePreview"></div>
                </div>
                <div class="form-group">
                    <label for="pinyinInput">拼音:</label>
                    <input type="text" id="pinyinInput" placeholder="请输入正确的拼音">
                </div>
                <div class="modal-buttons">
                    <button class="btn cancel-btn" id="cancelPinyin">取消</button>
                    <button class="btn save-btn" id="savePinyin">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/pinyin-pro@3.18.3/dist/index.js"></script>
    <script src="script.js"></script>
</body>
</html>